<template>
	<view class="nav">
	  <view :style=" 'heigth:'+status+'rpx;'+containerStyle"></view>
	  <view v-if="isHome" class = "headNav" :style="'heigth:'+navHeight+'rpx;line-height:'+navHeight +'rpx;padding-left:20rpx'">
		  <text class="city">中部地区</text>
		  <view style="flex: 1;">
			  
			  <navigator
			  url="/pages/search/index"
			  :style="
			  'hegiht:'+menu.height*2
			  +'rpx;line-height:'
			  +menu.height*2+
			  'rpx;margin-top:'
			  +(menu.top*2 - status*0.65)
			  +'rpx;margin-left:32rpx;margin-right:'
			  +(menu.width*2+24)+
			  'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center'">
			  
				  <text class="search-text">找医院</text>
			  </navigator>
		  </view>
	  </view>
	  
	  <view v-else class="navbar" :style=" 'heigth:'+navHeight+'rpx;'+containerStyle">
	    <view class="back-icon" @click="backOrHome">
		<image v-if="pages>1" src="/static/resource/navbar/ic_back.png" ></image>
		<image v-else src="/static/resource/navbar/ic_home.png" ></image>
		   </view>
		   <view class="nav-title" v-if="titleText">
			   <view :style="'height:'+navHeight+'rpx;line-height:'+navHeight +'rpx'">{{titleText}}</view>
		   </view>
		</view>
	</view>
</template>

<script setup>
import { ref,onBeforeMount, reactive} from 'vue';
//defineProps接收父组件传的值
 const props = defineProps({
	background:{
		type : String,
		default : 'rgba(255,255,255,1)'
	},
	color:{
		type : String,
		default : 'rgba(0,0,0,1)'
	},
	fontSize: {
		type :Number,
		default : 32
	},
	iconWidth:{
		type:Number,
		default:116
	},
	iconHeigth:{
		type:Number,
		default:38
	},
	titleText:{
		type:String,
		default:''
	},
	isHome:{
		type:Boolean,
		default:false
	}
})

const emits = defineEmits(['navBarAttached'])

//在组件挂载之前被调用。
 onBeforeMount(()=>{
	 setNavSize()
	 setStyle()
	 emits('navBarAttached',{
		 detail:{
			 statusHeight :status.value,
			 navHeight : navHeight.value,
			 navBarHeigth : status.value + navHeight.value
		 }
	 })
 })
 

  //内容高度
  const navHeight = ref(0)
  
  //状态栏高度
  const status = ref(0)
  
  //背景颜色
  const containerStyle = ref('')
  
  //字体样式
  const textStyle = ref('')
  
  //图标样式
  const iconStyle = ref('')
  
  //页面栈的数量
  const pages = ref(getCurrentPages().length) 
  console.log('page'+pages.value)
  //获取右侧悬浮按钮位置
  const menu = reactive(uni.getMenuButtonBoundingClientRect())
  
  
  //计算状态栏高度
  const setNavSize = ()=>{
	  const {system,statusBarHeight} = uni.getSystemInfoSync()
	  console.log(statusBarHeight)
	  status.value = statusBarHeight *2
	  const isiOS = system.indexOf('iOS') > -1
	  if(!isiOS){
		  navHeight.value = 96
	  } else{
		  navHeight.value = 88
	  }
  }
  //样式设置
  const setStyle = () =>{
	  containerStyle.value = ['background:' + props.background].join(';')
      textStyle.value = ['color:' + props.color,'font-size:'+ props.fontSize + 'rpx'].join(';')
	  iconStyle.value = ['width:'+props.iconWidth+'rpx','height:'+props.iconHeigth+'rpx'].join(';')
  }
  
  //跳转逻辑
  const backOrHome = ()=>{
	  if(pages.value>1){
		  //返回上一级
		  uni.navigateBack()
	  }else{
		  //返回首页
		  uni.switchTab({
		  	url:'/pages/index/index'
		  })
	  }
  }
 </script>

<style>
  .nav {
	position: fixed;   /* 固定定位，相对于浏览器窗口定位 */
	  width: 100%;       /* 宽度撑满整个视口的宽度 */
	  top: 20rpx;            /* 距离顶部为0，通常用于导航栏固定在顶部 */
	  left: 0;           /* 距离左侧为0，与top配合确保元素贴边 */
	  z-index: 2;        /* 层级顺序，值越大越靠前，防止被其他元素遮挡 */
  }
  .back-icon{
	  display: flex;
	  align-items: center;
      width: 64rpx;
	  height: 100%;
	  margin-left: 20rpx;
  }
  .back-icon image{
	  width: 64rpx;
	  height: 64rpx;
  }
  .navbar{
  		position: relative;
  	}
	.nav-title{
		position: absolute;
        top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav{
		display: flex;
	}
    .city {
        display: inline-block;
        position: relative;
        font-size: 30rpx;
        font-weight: bold;
        padding-left: 55rpx;
        background: url()
            no-repeat left center;
        background-size: 40rpx;
    }
    
    .city:after {
        content: ' ';
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 1px 1px 0 0;
        border-color: #353535;
        border-style: solid;
        -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: -10px;
    }
    .search-text {
        display: inline-block;
        padding-left: 30rpx;
        color: #bbbbbb;
        font-size: 26rpx;
        background: url()
            no-repeat left center;
        background-size: 23rpx;
    }
</style>